<template>
    <view :style="{'--color': color}">
		<block v-if="pageData.dealer == 1">
			<view class="padding30">
				<view class="card thmeBg bor_radius_30 p-re white m-bot30" >
					<image :src="imgUrl + 'Uploads/User_img/shadingImg.png'" mode="aspectFill" class="wh p-ab"></image>
					<view class="d-flex j-sb padding30">
						<view class="size26 bold">账户基本信息</view>
					</view>
					<view class="d-flex m-top30">
						<view class="text-center w-333">
							<view class="size36">{{pageData.cumulative_income}}</view>
							<view class="m-top16 size28">总收益</view>
						</view>
						<view class="text-center w-333">
							<view class="size36">{{pageData.pending}}</view>
							<view class="m-top16 size28">待结算</view>
						</view>
						<view class="text-center w-333">
							<view class="size36">{{pageData.income}}</view>
							<view class="m-top16 size28">待提现</view>
						</view>
					</view>
				  
				</view>
			</view>
			
			
			<view class="viewbox auto shops" v-for="(item,index) in shops" :key="index" 
			@click="shopDetails(item.shop_id)">
				<image :src="$imgUrls(item.logo)" mode="aspectFill" class="Logo"></image>
				<view class="shopContent">
					<view class="d-flex">
						<view class="bussName" v-if="item.bussName">{{item.bussName}}</view>
						<text class="color_33 size26">{{item.name}}</text>
					</view>
					<view class="Statistics">
						<view class="d-flex f-column a-center color_33 ">
							<text class="size28">{{item.orderCount}}</text>
							<text class="size26 m-top10">总单量</text>
						</view>
						<view class="d-flex f-column a-center">
							<text class="size28">{{item.payment}}</text>
							<text class="size26 m-top10">交易额</text>
						</view>
						<view class="d-flex f-column a-center">
							<text class="size28">{{item.income}}</text>
							<text class="size26 m-top10">总收益</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class=" Add" 
			@click="toUrl(`/pages/reserve/formSubmit?ordId=${pageData.shopsncode}`)">去添加店铺</view>
		</block>
		
        <emptys v-if="pageData.dealer == 0"  title='您还没有开通代理中心功能'></emptys>
		<view class="row j-se a-center m-top50" v-if="pageData.dealer == 0">
			<view class="btns bgCC" @click="$back()">暂不开通</view>
			<view class="btns Continue" 
			@click="toUrl(`/pages/reserve/formSubmit?ordId=${pageData.sncode}`)">去申请</view>
		</view>
    </view>
</template>

<script>
import {mapState} from 'vuex'
export default {
    data(){
        return {
            imgUrl: this.imgUrl,
            pageData:'',
			shops:[],
        }
    },
    computed: {
        ...mapState(['color','position'])
    },
    onLoad(e){
        // if(this.position.longitude == 0) this.$pop.getLocation()
		this.dealerIndex()
    },
    methods: {
		dealerIndex(){
			this.$http.get({
				url:'/WokersApi/dealerIndex',
			}).then(res=>{
				if(res.code != 200) return this.$Toast(res.msg,2)
				 const result = res.data
				 this.pageData = result
				 if(result.has_shop == 1) this.getDealerShop()
			})
		},
		
		getDealerShop(){
			this.$http.get({
				url:'/WokersApi/getDealerShop',
			}).then(res=>{
				if(res.code != 200) return this.$Toast(res.msg)
				const result = res.data || []
				this.shops = result
			})
		},
		
		shopDetails(shop_id){
			this.toUrl(`shopDetails?shop_id=${shop_id}`)
		}
     
    }
}
</script>

<style lang="scss" scoped>
.card {
    width: 690rpx;
    height: 320rpx;
    box-shadow: 0rpx 4rpx 11rpx 1rpx rgba(0,0,0,0.1);
    image {
        top: 0;
        left: 0;
    }
    .icon-a-032 {
        // right: -40rpx;
        left: 20rpx;
        top: 50%;
        transform: translateY(-50%);
    }
}
.btns{
	width:260rpx;
	height: 80rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 10rpx;
	font-size:26rpx;
}
.Continue{
	background-color: var(--color);
	color:#fff;
}
.shops{
	background-color: #f2f2f2;
	padding:30rpx;
	display: flex;
	margin-bottom: 20rpx;
}
.Logo{
	width:100rpx;
	height: 100rpx;
	border-radius: 50%;
	margin-right: 30rpx;
}
.shopContent{
	flex:1;
	display: flex;
	flex-direction: column;
}
.bussName{
	background-color: var(--color);
	padding:2rpx 10rpx;
	color:#fff;
	font-size:22rpx;
	margin-right: 10rpx;
}
.Statistics{
	width:100%;
	margin-top:20rpx;
	display: flex;
	justify-content: space-between;
}
.Add{
	width:300rpx;
	height: 80rpx;
	background-color: #000;
	color:#fff;
	font-size:28rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin:40rpx auto;
	border-radius: 40rpx;
}
</style>